<!--
/**
* Author: gaohui
* Date: 2023-03-02 09:33
* Desc: StoreComp vuex相关操作
*/
-->

<template>
  <title-line title="store基础操作" />
  <div class="name">用户名：{{ getUsername }}</div>
  <div class="mt10">
    <el-button @click.stop="changeName">修改用户名</el-button>
  </div>
</template>

<script name="StoreComp" lang="ts" setup>
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const getUsername = computed(() => {
  return store.getters?.getUserName;
});

const changeName = () => {
  store.dispatch("updateUserName", "michael");
};
</script>
<style lang="scss" scoped>
.name {
  font-size: 14px;
}
</style>
